<template>
    <div id="root">
        <div class="form-design">

            <div class="form-design-left">
                <div class="widget-item-template" widgetType="text" draggable="true" @dragstart="handleOndragstart">
                    <div class="widget-type-item">
                        <div class="widget-type-item-name">文本</div>
                        <div class="widget-type-item-icon">
                            <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg" data-icon="FileLinkWordOutlined">
                                <path
                                    d="M4 3h12.595c.93 0 1.806.355 2.439.96A3.07 3.07 0 0 1 20 6.176V21H7.405a3.53 3.53 0 0 1-2.439-.96A3.068 3.068 0 0 1 4 17.823V3ZM3 1a1 1 0 0 0-1 1v15.823c0 1.373.57 2.69 1.583 3.66A5.529 5.529 0 0 0 7.405 23H21a1 1 0 0 0 1-1V6.176a5.07 5.07 0 0 0-1.583-3.66A5.53 5.53 0 0 0 16.595 1H3Z"
                                    fill="currentColor"></path>
                                <path
                                    d="M6.75 8a1 1 0 0 1 1-1h8.5a1 1 0 1 1 0 2h-8.5a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h8.5a1 1 0 1 1 0 2h-8.5a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h4.5a1 1 0 1 1 0 2h-4.5a1 1 0 0 1-1-1Z"
                                    fill="currentColor"></path>
                            </svg>
                        </div>
                    </div>
                </div>

                <div class="widget-item-template" widgetType="number" draggable="true" @dragstart="handleOndragstart">
                    <div class="widget-type-item">
                        <div class="widget-type-item-name">数字</div>
                        <div class="widget-type-item-icon">
                            <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg" data-icon="SheetGaugeOutlined">
                                <path
                                    d="M7 8H5.546l-1.28.934v1.813l1.111-.816v6.4H7V8Zm4.44 0c.728.008 1.34.243 1.811.717.476.47.716 1.066.724 1.77v.003c0 .57-.176 1.084-.527 1.53l-2.196 2.753h2.723v1.622H9.01V15l3.11-3.89c.102-.135.165-.249.197-.344.023-.105.034-.2.034-.287a.911.911 0 0 0-.214-.606c-.134-.153-.329-.244-.618-.25a.812.812 0 0 0-.592.225l-.003.003c-.158.147-.264.363-.298.677l-.025.223H9l.011-.261c.031-.706.27-1.305.725-1.78l.003-.002c.46-.464 1.03-.7 1.694-.708h.006Zm7.938.761c-.474-.505-1.109-.753-1.878-.761h-.005a2.296 2.296 0 0 0-1.621.672c-.456.44-.716.984-.779 1.621l-.027.275h1.6l.043-.196c.062-.28.176-.458.323-.568l.006-.004a.789.789 0 0 1 .498-.177c.277.006.485.092.644.245.16.16.246.365.253.635 0 .265-.084.461-.24.613l-.004.003c-.152.152-.378.243-.715.243h-.636v1.494h.722c.292 0 .515.087.688.249.168.16.269.396.276.742-.007.338-.108.565-.274.718l-.004.004-.003.003a.882.882 0 0 1-.656.265c-.26 0-.443-.07-.573-.188l-.003-.001a1.334 1.334 0 0 1-.356-.536l-.061-.16H15l.055.295c.13.695.42 1.25.886 1.64.457.38.986.573 1.578.573h.003c.746-.008 1.376-.248 1.868-.73.505-.479.751-1.126.759-1.913v-.003c0-.366-.078-.717-.233-1.05l-.002-.005a2.071 2.071 0 0 0-.526-.667c.214-.189.38-.402.486-.64l.003-.007.003-.006c.118-.308.177-.629.177-.96v-.003a2.504 2.504 0 0 0-.678-1.713l-.001-.002Z"
                                    fill="currentColor"></path>
                                <path
                                    d="M1 5a2 2 0 0 1 2-2h18a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5Zm2 0v14h18V5H3Z"
                                    fill="currentColor"></path>
                            </svg>
                        </div>
                    </div>
                </div>

                <div class="widget-item-template" widgetType="select" draggable="true" @dragstart="handleOndragstart">
                    <div class="widget-type-item">
                        <div class="widget-type-item-name">下拉选项</div>
                        <div class="widget-type-item-icon">
                            <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg" data-icon="DownRoundOutlined">
                                <path
                                    d="M7.755 11.658a1 1 0 0 1 1.416-1.415L12 13.07l2.828-2.829a1 1 0 0 1 1.416 1.416c-1.181 1.189-2.356 2.386-3.553 3.56a.987.987 0 0 1-1.383 0c-1.196-1.175-2.371-2.371-3.553-3.56Z"
                                    fill="currentColor"></path>
                                <path
                                    d="M12 23C5.925 23 1 18.075 1 12S5.925 1 12 1s11 4.925 11 11-4.925 11-11 11Zm0-2a9 9 0 1 0 0-18 9 9 0 0 0 0 18Z"
                                    fill="currentColor"></path>
                            </svg>
                        </div>
                    </div>
                </div>

                <div class="widget-item-template" widgetType="textarea" draggable="true" @dragstart="handleOndragstart">
                    <div class="widget-type-item">
                        <div class="widget-type-item-name">长文本</div>
                        <div class="widget-type-item-icon">
                            <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg" data-icon="StyleOutlined">
                                <path
                                    d="M14 5a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2h-8Zm1 7a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2h-6a1 1 0 0 1-1-1Zm3 5a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2h-4Zm-3.201 4.223-2.449-5.946H4.77a1.16 1.16 0 0 1-.187-.016L2.498 21.17a1.105 1.105 0 1 1-2.084-.736L6.562 3.013c.507-1.435 2.517-1.486 3.096-.08l7.184 17.448a1.105 1.105 0 0 1-2.043.841ZM8.165 5.113l-2.808 7.954h6.083L8.165 5.112Z"
                                    fill="currentColor"></path>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="widget-item-template" widgetType="attachment" draggable="true"
                    @dragstart="handleOndragstart">
                    <div class="widget-type-item">
                        <div class="widget-type-item-name">附件</div>
                        <div class="widget-type-item-icon">
                            <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg" data-icon="AttachmentOutlined">
                                <path
                                    d="M12.304 7.315a1 1 0 0 1 1.414 1.414L8.13 14.317a1.485 1.485 0 0 0 0 2.1l.01.011a1.5 1.5 0 0 0 2.117-.005l7.43-7.43a3.5 3.5 0 0 0 0-4.95l-.036-.037a3.5 3.5 0 0 0-4.95 0l-7.778 7.777a5.521 5.521 0 0 0 7.808 7.809l7.07-7.07a1 1 0 0 1 1.415 1.414l-7.07 7.07A7.521 7.521 0 0 1 3.509 10.37l7.778-7.778a5.5 5.5 0 0 1 7.778 0l.037.037a5.5 5.5 0 0 1 0 7.778l-7.43 7.43a3.5 3.5 0 0 1-4.939.012l-.006-.006-.012-.012a3.485 3.485 0 0 1 0-4.928l5.589-5.588Z"
                                    fill="currentColor"></path>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="widget-item-template" widgetType="user" draggable="true" @dragstart="handleOndragstart">
                    <div class="widget-type-item">
                        <div class="widget-type-item-name">联系人</div>
                        <div class="widget-type-item-icon">
                            <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg" data-icon="MemberOutlined">
                                <path
                                    d="M9 13h6c2.761 0 6 1.929 6 5.4V20c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-1.6C3 14.932 6.239 13 9 13Zm10 7v-1.667C19 16.232 16.871 15 15 15H9c-1.83 0-4 1.172-4 3.333V20h14Zm-7-8a5 5 0 1 1 0-10 5 5 0 0 1 0 10Zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
                                    fill="currentColor"></path>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="widget-item-template" widgetType="date" draggable="true" @dragstart="handleOndragstart">
                    <div class="widget-type-item">
                        <div class="widget-type-item-name">日期</div>
                        <div class="widget-type-item-icon">
                            <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg" data-icon="CalendarLineOutlined">
                                <path
                                    d="M7 2a1 1 0 0 1 1 1h8a1 1 0 1 1 2 0h2a2 2 0 0 1 2 2v15a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h2a1 1 0 0 1 1-1Zm9 3H8a1 1 0 0 1-2 0H4v15h16V5h-2a1 1 0 1 1-2 0ZM9 15a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1Zm1.5-5a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1Zm3 5a1 1 0 0 0-1-1h-1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1Zm1.5 0a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1Zm3-5a1 1 0 0 0-1-1h-1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1Z"
                                    fill="currentColor"></path>
                            </svg>
                        </div>
                    </div>
                </div>
                <div style="clear: both;"></div>
            </div>
            <div class="form-design-middle">
                <div class="form-design-middle-inner">
                    <!-- 手机模型 -->
                    <div class="phone-wrapper">
                        <div class="phone-wrapper-screen" id="formDesigerContainer">
                            <div class="field-list-header">收款单</div>
                            <div class="form-item-inner" @drop="handleFormDesignerDrop" @dragover="allowDrop">
                                <RenderFormItem 
                                    v-for="item in formItems" 
                                    :data="item" 
                                    @move="handleWidgetMove"
                                    :key="item.id" 
                                    :item-config="formItemAttribute"
                                    @openFormItemAttributePanel="handleOpenFormItemAttributePanel" />
                            </div>

                        </div>
                    </div>
                </div>

            </div>
            <div class="form-design-right" id="config-panel">
                <FormItemAttributes :config="formItemAttribute"/>
            </div>
        </div>
    </div>
</template>
<script>
import RenderFormItem from './RenderFormItem.vue'
import FormItemAttributes from './FormItemAttributes.vue'
let widgetTemplateMap = {
    text:
    {
        widgetType: "text",
        title: "文本",
        placeholder: "请输入",
        print: true,
        required: false,
        defaultValue: {
            enable: false,
            value: null
        },
        id: null
    },
    number: {
        widgetType: "number",
        title: "数值",
        placeholder: "请输入数值",
        print: true,
        required: false,
        defaultValue: {
            enable: false,
            value: null
        },
        id: null
    },
    select: {
        widgetType: "select",
        title: "单选",
        placeholder: "",
        options: {
            dataSource: "手动添加",
            fixedValues: [

            ],
            dataSourceApi: {
                url: null,
                token: null,
                key: null
            }
        },
        print: true,
        required: false,
        defaultValue: {
            enable: false,
            value: null
        },
        id: null
    },
    textarea: {
        widgetType: "textarea",
        title: "长文本",
        placeholder: "请输入",
        print: true,
        required: false,
        defaultValue: {
            enable: false,
            value: null
        },
        id: null
    },
    attachment: {
        widgetType: "attachment",
        title: "附件",
        placeholder: "",
        print: true,
        required: false,
        defaultValue: {
            enable: false,
            value: null
        },
        id: null
    },
    user: {
        widgetType: "user",
        title: "联系人",
        placeholder: "",
        print: true,
        required: false,
        defaultValue: {
            enable: false,
            value: null
        },
        id: null
    },
    date: {
        widgetType: "date",
        title: "日期",
        placeholder: "请选择",
        print: true,
        required: false,
        defaultValue: {
            enable: false,
            value: null
        },
        id: null
    }
}
/**
 * 获取组件模板
 * @param {*} widgetType 
 */
function getWidgetTemplate(widgetType){
    return JSON.parse(JSON.stringify(widgetTemplateMap[widgetType]))
}
export default {
    props:{
        formItems:{
            type:Array,
            default:()=>{
                return [];
            }
        }
    },
    components: {
        RenderFormItem,
        FormItemAttributes
    },
    data() {
        return {
            formItemAttribute: {
                defaultValue:{
                    
                }
            }
        }
    },
    methods: {
        handleOndragstart(e) {
            let widgetType = e.target.getAttribute("widgetType");
            console.log("widgetType", widgetType)
            this.$store.commit('setAddWidgetType', widgetType);
        },
        allowDrop(event) {
            event.preventDefault();
        },
        generateWidgetId() {
            return (new Date().getTime() + "");
        },
        handleFormDesignerDrop(e) {
            console.log("设计器的drop事件")
            e.preventDefault();
            let moveWidget = this.$store.state.moveWidget;
            //位置调整到表单底部
            if (moveWidget) {
                this.formItems = moveElementToPosition(this.formItems, moveWidget, this.formItems[this.formItems], 1);
                this.$store.commit('setMoveWidget', null);
            } else {//新增组件
                let widgetType = this.$store.state.addWidgetType;
                let widget = getWidgetTemplate(widgetType)
                //设置id
                widget.id = this.generateWidgetId()
                console.log("设计器追加组件：",widget)
                this.formItems.push(widget)
            }
            this.$forceUpdate();
        },
        /**
         * 处理组件位置移动
         * @param {*} passiveWidgetId 被移动的组件id
         * @param {*} targetId 移动目标位置的组件id
         */
        handleWidgetMove(moveWidget, target) {
            console.log("设计器move")
            //调整组件位置
            if(moveWidget){
                this.formItems = moveElementToPosition(this.formItems, moveWidget, target)
            }else{
                let widgetType = this.$store.state.addWidgetType;
                //在target之前插入组件
                let widget = getWidgetTemplate(widgetType);
                //设置id
                widget.id = this.generateWidgetId()
                this.formItems.splice(this.formItems.indexOf(target), 0, widget);
            }
            
            this.$forceUpdate();
            this.$store.commit('setMoveWidget', null);
        },
        handleOpenFormItemAttributePanel(formItem) {
            console.log(JSON.stringify(formItem))
            this.formItemAttribute = formItem;
        }
    }
}

function moveElementToPosition(arr, item, target, local) {
    // 获取当前元素的索引
    const currentIndex = arr.indexOf(item);
    // 如果元素不存在或目标索引无效，返回原数组
    if (currentIndex === -1) {
        return arr;
    }
    // 移除当前元素
    arr.splice(currentIndex, 1);
    if (local == 1) {
        //添加到末尾
        arr.push(item)
    } else {
        // 在目标索引位置插入元素
        arr.splice(arr.indexOf(target) + (local ? local : 0), 0, item);
    }
    return arr;
}

</script>
<style scoped>
.panel {
    padding: 24px;
    height: 100%;
    overflow-y: auto;
}

.title {
    margin-bottom: 16px;
    font-family: PingFang SC, Microsoft YaHei;
    font-size: 18px;
    line-height: 28px;
    color: #1f2329;
    font-weight: 500;
}

.base-form-item {
    position: relative;
    margin-bottom: 24px;
}

.base-form-item-label-parent {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}


.base-form-item-label {
    display: block;
    color: #1f2329;
    font-family: PingFang SC, Microsoft YaHei;
    font-size: 14px;
    line-height: 22px;
    margin-right: 16px;
}


.base-form-item-label.base-form-item-label-required>span {
    position: relative;
}

.base-form-item-label.base-form-item-label-required>span:after {
    content: "*";
    position: absolute;
    left: 100%;
    top: 1px;
    line-height: 20px;
    padding-left: 2px;
    color: #f54a45;
}

*,
:after,
:before {
    box-sizing: border-box;
}


[role=button],
a,
area,
button,
input:not([type=range]),
label,
select,
summary,
textarea {
    touch-action: manipulation;
}

input[type=number],
input[type=password],
input[type=text],
textarea {
    -webkit-appearance: none;
}

.eic-input {
    box-sizing: border-box;
    margin: 0;
    font-variant: tabular-nums;
    list-style: none;
    font-feature-settings: "tnum", "tnum";
    position: relative;
    display: inline-block;
    width: 100%;
    height: 32px;
    padding: 4px 11px;
    color: #1f2329;
    font-size: 14px;
    line-height: 1.5;
    background-color: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.eic-input:focus {
    outline: 0;
    box-shadow: 0 0 0 2px rgba(51, 112, 255, .2);
}

.eic-input:focus,
.eic-input:hover {
    border-color: #5c92ff;
    border-right-width: 1px !important;
}

.add-operator {
    display: inline-block;
    line-height: 24px;
    color: #3370ff;
    cursor: pointer;
    user-select: none;
    /* padding: 2px 4px; */
    border-radius: 6px;
    /* margin-left: 5px; */
    padding: 2px 4px;
    margin-top: 6px;
    font-size: 14px;

}

.add-operator:hover {
    background-color: rgba(51, 112, 255, .1);
}

.form-options-v2-option-box {
    display: flex;
    justify-content: flex-start;
    flex: auto;
    align-items: center;
    margin-bottom: 8px;
}

.form-options-v2-option-box .form-options-v2-option {
    flex-grow: 1;
}

.form-options-v2-option-box .delete-btn {
    margin-left: 4px;
    font-size: 16px;
    cursor: pointer;
    color: #8f959e;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    margin: 0;
    font-family: PingFang SC, Microsoft YaHei;
    /* 移除默认的margin */
}


body {
    font-family: PingFangSC-Regular, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

#root {
    height: 100%;
    overflow: auto;
    height: calc(100% - 0px);

}

.form-design {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: #eff0f1;
    margin: 0px;
    padding: 0px;
}

.form-design-top {
    min-height: 50px;
    background-color: #fff;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .06);
}

.form-design-left {
    position: absolute;
    left: 0px;
    top: 1px;
    bottom: 0px;
    z-index: 1;
    width: 360px;
    height: 100%;
    background-color: #fff;
}

.form-design-middle {
    width: 100%;
    height: 100%;
}

.form-design-right {
    position: absolute;
    top: 1px;
    bottom: 0;
    right: 0;
    z-index: 1;
    background-color: #fff;
    min-width: 400px;
}

.form-design-middle-inner {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    height: 800px;
    margin-top: 50px;
}

.phone-wrapper {
    height: 100%;
    padding: 12px 12px 28px;
    box-shadow: 2px 4px 12px 0 rgba(0, 0, 0, .16), inset 0 -1px 1px 0 #c9cbd5, inset -1px 0 4px 0 rgba(57, 63, 89, .09);
    border: 1px solid #eee;
    border-radius: 24px;
    background-color: #fff;
    height: 580px;
    width: 320px;
}

.phone-wrapper-screen {
    height: 100%;
    max-width: 300px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, .1);
    background-color: #f4f5f6;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.form-item-inner {
    flex: 1;
    max-width: 300px;
    background-color: #f4f5f6;
    z-index: 1;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    overflow-y: scroll;
    padding-bottom: 30px;
    box-sizing: border-box;
    border: 1px solid #f4f5f6;
}

.form-item-inner:hover {
    /* border: 1px solid #336df4; */
}

.field-list {
    height: 100%;
    border-radius: 16px;
    background-color: #f5f6f7;
    font-size: 14px;
    overflow-y: auto;
    padding-bottom: 60px;
    border: 1px solid #fff;
}

.field-list-header {
    font-family: PingFang SC, Microsoft YaHei;
    font-size: 14px;
    margin-bottom: 4px;
    width: 100%;
    height: 42px;
    padding: 0 1em;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    line-height: 42px;
    text-align: center;
    font-weight: 500;
    color: #1f2329;
    background-color: #fff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.widget-item-template {
    width: 150px;
    margin: 5px;
    float: left;
    /* position: absolute; */
}

.widget-type-item {
    display: flex;
    align-items: center;
    padding: 5px 3px 5px 7px;
    border: 1px solid #e4e5e7;
    border-radius: 4px;
    cursor: -webkit-grab;
    cursor: grab;
    position: relative;
    color: #646a73;
    margin: 0 auto;

}

.widget-type-item .widget-type-item-name {
    width: 70%;
    font-family: PingFang SC, Microsoft YaHei;
    font-size: 14px;
    line-height: 20px;
    color: #646a73;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: auto;
}

.widget-type-item .widget-type-item-icon {
    width: 30%;
    text-align: right;
    line-height: 5px;
    padding-right: 4px;
}


.widget-type-item:hover {
    border: 1px solid #3370ff;
    -webkit-transform: translate(0);
    transform: translate(0);
    background: #fff;
    box-shadow: 0 4px 8px rgba(31, 35, 41, .03), 0 3px 6px -6px rgba(31, 35, 41, .05), 0 6px 18px 6px rgba(31, 35, 41, .03);
}

.widget {
    width: 100%;
    padding: 10px;
    background-color: #FFFFFF;
    margin-top: 8px;
    cursor: pointer;
    border: 1px solid #FFFFFF;
    position: relative;
}

.field-item-operationBar {
    position: absolute;
    right: 0px;
    top: -24px;
    display: none;
    justify-content: flex-end;
    align-items: center;
    height: 24px;
    padding: 4px;
    border-radius: 4px 4px 0 0;
    color: #fff;
    background-color: #336df4;
    font-size: 12px;
}

.field-item-operationBar .copy-btn {
    height: 24px;
    line-height: 24px;
    padding-left: 5px;
    padding-right: 5px;
}


.field-item-operationBar .del-btn:hover {
    border-radius: 6px;
    background-color: rgba(31, 35, 41, .2);
}

.field-item-operationBar .copy-btn:hover {
    border-radius: 6px;
    background-color: rgba(31, 35, 41, .2);
}

.field-item-operationBar .del-btn {
    height: 24px;
    line-height: 24px;
    padding-left: 5px;
    padding-right: 5px;
}

.widget {
    border: 1px solid #fff;
}

.widget:hover {
    border-color: #336df4;
}

.widget .label {
    width: 100%;
    margin-bottom: 12px;
    font-family: PingFang SC, Microsoft YaHei;
    font-size: 14px;
    line-height: 20px;
    min-height: 20px;
    color: #1f2329;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}

.widget .form-item-box .upload-btn {
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    color: #8f959e;
    font-size: 16px;
    background-color: #f5f6f7;
}

.widget .form-item-box .user-add-btn {
    height: 26px;
    width: 44px;
    border-radius: 13px;
    border: 1px solid #82a7fc;
    box-sizing: border-box;
    position: relative;
    text-align: center;
    color: #82a7fc;
}

.widget .base-textarea {
    min-height: 40px;
    font-family: PingFang SC, Microsoft YaHei;
    font-size: 14px;
    line-height: 20px;
    color: #8f959e;
    word-break: break-word;
}

.widget .inline {
    display: flex;
    justify-content: space-between;
}

.widget .placeholder {
    color: #8f959e;
}

.widget .required {
    color: red;
}

.base-form-item {
    position: relative;
    margin-bottom: 24px;
}

.base-form-item-label {
    display: block;
    color: #1f2329;
    font-family: PingFang SC, Microsoft YaHei;
    font-size: 14px;
    line-height: 20px;
    line-height: 22px;
}
</style>